<template>
    <el-menu router default-active="2" class="XMenu_bigbox" :unique-opened="true" :collapse="isCollapse">
        <div class="logo">
            <!-- 自定义插槽 -->
            <slot v-if="!props.isCollapse" name="unfoldlogo"></slot>
            <slot v-else name="foldlogo"></slot>
        </div>
        <div class="menu">
            <div v-for="item in navList" :key="item.path">
                <div v-if="item.children" @click="unfoldList(item)">
                    <div class="Menu_title Menu_item">
                        <span class="leftTitle">
                            <el-icon>
                                <component :is="item.icon" />
                            </el-icon>
                            <span class="Menu_item_title">
                                {{ item.titleName }}
                            </span>
                            <el-icon class="showSunLi" v-if="item.showSun">
                                <ArrowDownBold />
                            </el-icon>
                            <el-icon class="showSunLi" v-else>
                                <ArrowRightBold />
                            </el-icon>
                        </span>
                    </div>
                    <div v-for="item1 in item.children" :key="item1.path" v-show="item.showSun"
                        class="Menu_item_children">
                        <div class="Menu_item_children_item">
                            <span class="Menu_item_children_item_title">
                                {{ item1.name }}
                            </span>
                        </div>
                    </div>
                </div>
                <div v-else class="Menu_item">
                    <span class="leftTitle">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span class="Menu_item_title">
                            {{ item.titleName }}
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </el-menu>
</template>
<script setup>
import { onMounted, shallowRef, watch, ref } from 'vue';
import { Mouse } from '@element-plus/icons-vue';
import data from '@/router/WebPageManagement'// 网页管理路由
const WebPageManagementRouter = JSON.parse(JSON.stringify(data))
const props = defineProps({
    isCollapse: {
        type: Boolean,
        required: false
    }
});
const folderCorrespondingMenu = [
    {
        icon: Mouse,
        titleName: '首页',
    },
    {
        icon: Mouse,
        titleName: '其他页面',
        childrenName: "/AtherPage",
    },
]
const unfoldList = (item) => {
    console.log(item);
    for (let i = 0; i < navList.value.length; i++) {
        if (navList.value[i].titleName == item.titleName) {
            navList.value[i].showSun = !navList.value[i].showSun
            console.log('-------------');
        } else {
            navList.value[i].showSun = false
        }
    }
}
function initNavlist(WebPageManagementRouter, folderCorrespondingMenu) {
    for (let index = 0; index < WebPageManagementRouter.length; index++) {
        const obj = WebPageManagementRouter[index];
        const segments = obj.path.split('/');
        if (segments.length > 2) {
            const pathToMatch = '/' + segments[1];
            for (let index2 = 0; index2 < folderCorrespondingMenu.length; index2++) {
                const element = folderCorrespondingMenu[index2].childrenName;
                if (element == '' || element == undefined) {
                    // 跳出单次循环
                    continue;
                }
                if (pathToMatch === element) {
                    if (folderCorrespondingMenu[index2].children === undefined) {
                        folderCorrespondingMenu[index2].children = [];
                    }
                    folderCorrespondingMenu[index2].children.push(obj);
                    // 移除已经添加的数据
                    WebPageManagementRouter.splice(index, 1);
                    index--;
                    break;
                }
            }
        }
    }
    // 把folderCorrespondingMenu内的每一项的children数组按照order字段排序
    for (let index = 0; index < folderCorrespondingMenu.length; index++) {
        const element = folderCorrespondingMenu[index].children;
        if (element == '' || element == undefined) {
            // 跳出单次循环
            continue;
        }
        element.sort((a, b) => a.order - b.order);
    }
    for (let i = 0; i < folderCorrespondingMenu.length; i++) {
        if (folderCorrespondingMenu[i].children == undefined) {
            continue;
        }
        if (folderCorrespondingMenu[i].children.length == 0) {
            // 删除空的children属性
            delete folderCorrespondingMenu[i].children
        } else {
            if (i == 0) {
                folderCorrespondingMenu[i].showSun = true
            } else {
                folderCorrespondingMenu[i].showSun = false
            }
        }
    }
    console.log(folderCorrespondingMenu);
    return folderCorrespondingMenu;
}
const navList = ref([])
onMounted(() => {
    navList.value = initNavlist(WebPageManagementRouter, folderCorrespondingMenu)
})
</script>

<style scoped lang='scss'>
.XMenu_bigbox {
    border-radius: 5px;
    border: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: var(--all-transition);
    color: var(--text-color);
    background-color: var(--bg-color);

    .logo {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 25px;
        transition: var(--all-transition);
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    .Menu_item {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        flex-direction: column;
        padding: 10px 20px;
        font-weight: 700;
        font-size: 18px;
        line-height: 22px;
        transition: var(--all-transition);
        color: var(--text-color);
        background-color: var(--bg-color);

        .Menu_title {
            display: flex;
            justify-content: space-around;
        }
        .leftTitle {
            display: flex;
            align-items: center;
        }
        .showSunLi {
            margin-left: 20px;
        }

        .Menu_item_title {
            margin-left: 10px;

        }
        &:hover {
            background-color: var(--home-menu-hover-color);
        }
    }
}
</style>